/**
 * @author of2470
 *@date 2017/4/25
 *@description
 */
import * as React from "react";
import { Relax } from "iflux2";
import { List, Map } from "immutable";
import { Modal, Tabs, message, Spin } from "antd";
const TabPane = Tabs.TabPane;
import "../styles/page-modal.less";
import { applyTpl } from "../../common/template-common";
import { getEnvXSite } from "x-site-util";
import { getSystemCodeZip } from "../../common/const-value";
import GaUtil from "common-util/ga-util";

declare let window: any;

const SystemCodeZip = getSystemCodeZip();

@Relax
export default class PageModalWx extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: "1"
    };
  }

  static defaultProps = {
    visible: false,
    changeModalStatus: () => {},
    templateList: List(),
    pageTypeBtns: List(),
    getTemplateList: () => {},
    getActivatedPageInfo: () => {},
    getPageList: () => {},
    activatedPageInfo: Map()
  };

  componentDidMount() {
    if (!window.isUpdating) {
      this.props.getActivatedPageInfo();
    }
  }

  render() {
    let templateArea = this.props.templateList.map(template => {
      template = template.toJS();
      return (
        <li className="page-modal-li" key={template.id}>
          <img
            className="page-img"
            src={template.detailInfo && template.detailInfo.detailImage}
            alt=""
          />
          <p className="page-title">
            {template.templateName_cn}
          </p>
          <div className="page-li-img-mask" />
          <div
            className="page-modal-button-apply"
            onClick={this._applyTpl.bind(this, template)}
          >
            应用
          </div>
          <div
            className="page-modal-button-preview"
            onClick={this._previewTpl.bind(this, template)}
          >
            预览
          </div>
        </li>
      );
    });

    let tabPanes = this.props.pageTypeBtns.map(item => {
      return (
        <TabPane tab={item.get("name")} key={item.get("id")}>
          <div className="page-modal-wx-title">
            <ul>
              {templateArea}
              <li className="page-modal-li">
                <img
                  className="page-img"
                  style={{ marginBottom: "36px" }}
                  src="//qianmi-web.oss-cn-hangzhou.aliyuncs.com/x-site/public/images/more_template.png"
                />
              </li>
            </ul>
          </div>
        </TabPane>
      );
    });
    return (
      <div style={{ minHeight: "724px" }}>
        <Modal
          visible={this.props.visible}
          width="900px"
          footer={null}
          maskClosable={true}
          onCancel={this.handleCancel}
        >
          <Tabs activeKey={this.state.activeKey} onChange={this._onChangeTab}>
            {tabPanes}
          </Tabs>
        </Modal>
      </div>
    );
  }

  //切换tab页标签
  _onChangeTab = key => {
    let target = this;
    let includePageTypeList = [];
    this.props.pageTypeBtns.forEach(item => {
      if (item.get("id") == key) {
        includePageTypeList = item.get("typeList");
      }
    });
    this.props
      .getTemplateList({
        includePageTypeList,
        platform: this.props.platform
      })
      .then(() => {
        target.setState({ activeKey: key });
      })
      .catch(err => {
        console.log(err);
        target.setState({ activeKey: key });
      });
  };

  //预览模板
  _previewTpl = templateInfo => {
    let url = templateInfo.detailInfo.previewHtml;
    let host = getEnvXSite();
    host = host.indexOf("http://") < 0 ? host.replace("//", "http://") : host;
    if (["weixin", "app"].indexOf(templateInfo.platForm) >= 0) {
      url =
        host +
        "/wxpreview?url=" +
        encodeURIComponent(url) +
        (["custom", "article", "liveShow"].indexOf(templateInfo.pageType) >= 0
          ? "&title=" +
            (templateInfo.templateName_cn || templateInfo.templateName)
          : "") +
        "&sc=" +
        SystemCodeZip;
    }
    window.open(url);
    GaUtil.addPageEvent({
      eventAction: "预览模板",
      eventLabel: templateInfo.templateCode,
      platform: this.props.platform
    });
  };

  //关闭模态框
  handleCancel = () => {
    this.props.getPageList({
      platform: this.props.platform,
      pageNo: 0,
      pageSize: 10
    });
    this.props.changeModalStatus(false);
    this.setState({ activeKey: "1" });
  };

  //应用模板
  _applyTpl = templateInfo => {
    if (
      templateInfo.pageType !== "index" &&
      (!this.props.activatedPageInfo ||
        !this.props.activatedPageInfo.get(this.props.platform))
    ) {
      message.warn("请先发布您的首页！");
    } else {
      let url = applyTpl(templateInfo);
      window.open(url);
    }
    GaUtil.addPageEvent({
      eventAction: "应用模板",
      eventLabel: templateInfo.templateCode,
      platform: this.props.platform
    });
  };
}
